<template>
	<view class="box">
		<u-navbar title="我的合成材料" :fixed="true" :placeholder="true" :safeAreaInsetTop="true" :autoBack="false"
			leftIconColor="#666" titleStyle="color:#333" bgColor="#E0DDDA" rightText="" @rightClick="goPageDetail"
			@leftClick="leftClick"></u-navbar>
		<checkbox-group @change="checkboxChangeAll">
			<view class="obj_list">
				<view class="obj_list_item" v-for="item in goodlist" :key="item.id" >
					<image class="obj_list_item_bg" :src="item.good.goods_image" mode="aspectFill"></image>
					<view class="obj_list_item_name">
						{{item.good.goods_name}}
					</view>
					<view class="obj_list_item_num">
						藏品编号：{{item.goods_number}}/{{item.good.circulation}}
					</view>
					<view class="obj_list_item_price">
						<view class="obj_list_item_price_tag">
							买入价
						</view>
						<text>
							<image style="width: 28rpx;height: 28rpx;margin-right: 6rpx;"
								src="../../static/icon/i_money.png" mode=""></image>{{item.price}}
						</text>
					</view>
					<view class="hoarding flex_dq">
						<text>战力值:</text>
						<text>{{item.ce_value}}</text>
					</view>
					<view class="tag" v-if="item.status_desc">
						{{item.status_desc}}
					</view>
					<checkbox borderColor="#E9E3DA" activeBorderColor="#A68A64" activeBackgroundColor="#A68A64"
						backgroundColor="#E9E3DA" :checked="isSelected(item)" :value="item.id.toString()"></checkbox>
					<!-- 		<view class="btnwrap">
					<view class="btn" style="margin-left: 20rpx;" 
						@click="add(item)">
						添加
					</view>
					
				</view> -->
				</view>
			</view>
		</checkbox-group>
		<noDatas :xxxList="goodlist" :status="status"></noDatas>
		<view style="width: 750rpx;height: 100rpx;">
		</view>
		<view class="btn_now flex_ld">
			<view class="submit flex_Z">
				<view class="submit_l ">
					<text class="f28 c3">合计战力值：</text>
					<text class="f30 c5">￥{{total}}</text>
				</view>

			</view>
			<view class="submit_btn flex_c">
				<text @click="sub">确定添加</text>
			</view>
		</view>

	</view>

</template>

<script>
	import NP from 'number-precision'
	import {
		hatchGoodsSpace
	} from "../../api/other.js";
	export default {
		data() {
			return {
				goodlist: [],
				page: 1,
				size: 50,
				selnum: "",
				types: null,
				inx2: 1,
				status: 'loadmore', //加载前值为loadmore，加载中为loading，没有数据为nomore
				page2: 1,
				size2: 20,
				goodlist2: [],
				Hallconfig: {}, //配置信息
				status2: 'loadmore', //加载前值为loadmore，加载中为loading，没有数据为nomore
				showsell: false,
				itemobj: {
					output_recovery: {
						price: "200.00"
					}

				},
				pid: '',
				showpass: false,
				password: "",
				statusval: "",
				showDig: false,
				objitem: {
					good: {
						circulation: "100"
					}
				},
				tipShow: false,
				delisting: 0,
				itemid: "",
				total1: "",
				total2: "",
				is_allow_rent: "",
				goods_id: "",
				typess: 1,
				selectedIds: [],
				total: 0,
				addlist:[]
			}
		},
		onLoad(options) {
			console.log(options)
			this.id = options.id
		},
		onShow() {
			this.getgoodlist()
		},

		methods: {
			sub(){
				if(this.addlist.length==0){
					uni.$u.toast("请选择合成材料")
				}else{
					uni.setStorageSync("selectedIdss",this.selectedIds)
					uni.setStorageSync("addlist",this.addlist)
					uni.setStorageSync("addtotal",this.total)
					uni.navigateTo({
						url:"/pagesMy/debris/cpdebrisdetailtwo?id="+this.id
					})
				}
			},
			// add(item){
			// 	this.addlist.push(item)
			//  this.total = this.addlist.reduce((acc, item) => acc + Number(item.ce_value), 0);
			// 	return NP.round(this.total, 2)
			// 	console.log(this.addlist)
			// },

			leftClick() {
				//获取页面栈的长度
				const canNavBack = getCurrentPages()
				console.log(canNavBack.length);
				// 判断是否刷新了浏览器，刷新了浏览器，页面栈只有当前一个
				if (canNavBack.length > 1) {
					uni.navigateBack({
						delta: 1
					})
				} else {
					uni.switchTab({
						url: '/pages/index/index'
					})
				}
			},

			checkboxChangeAll(e) {
					const target = e.detail.value;
				    console.log(target, "选中的数组");
					this.selectedIds=e.detail.value
				    this.addlist = []; // 清空之前的结果
				
				    this.addlist = this.goodlist.filter(item => target.includes((item.id).toString()));
					const a  = this.addlist.reduce((acc, item) => acc + Number(item.ce_value), 0);
					this.total =NP.round(a, 2)
					
				    console.log("0000000000000000", this.addlist);

			},
			selcet(val) {
				this.isSwitch = false
				console.log(val)
			},
			isSelected(id) {
				console.log(id, "---------")
				return this.selectedIds.includes(id);
			},
			getgoodlist() {
				hatchGoodsSpace({
					page: this.page,
					id: this.id,
					// status: this.selnum
				}).then(res => {

					if (res.code == 1) {
						let list = res.data.data;
						this.goodlist = this.page == 1 ? list : this.goodlist.concat(list);
						console.log(this.goodlist);
						if (list.length < this.size) this.status = 'nomore';
						else this.status = 'loading';
					}
				})
			},
		},
		onReachBottom() {

			if (this.status != 'nomore') {
				this.page = this.page + 1
				this.getgoodlist()
			}


		},
		onPullDownRefresh() {
			console.log('下拉刷新');
			let that = this;
			if (this.selnum == "2") {
				setTimeout(function() {
					that.page2 = 1,
						that.getjinshoumai()
				}, 800);
			} else {
				setTimeout(function() {
					that.page = 1,
						that.getgoodlist()
				}, 800);
			}

		},
	}
</script>

<style lang="scss" scoped>
	.box {
		width: 750rpx;
		// height: 100vh;
		background: #E0DDDA;
		position: relative;
	}

	.btn_now {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 750rpx;
		height: 120rpx;
		background: #FCFCFB;
	}

	.submit {
		min-width: 280rpx;
		margin-left: 30rpx;
	}

	.submit_l {
		display: flex;
		align-items: center;
	}

	.mars {
		margin-left: 8rpx;
	}

	.submit_btn {
		width: 274rpx;
		height: 80rpx;
		background: linear-gradient(90deg, #AB8E68 0%, #D7BA93 100%);
		border-radius: 40rpx;
		color: #ffffff;
		font-size: 36rpx;
		margin-right: 30rpx;
	}

	.time_tips {
		width: 94%;
		// height: 100rpx;
		// background: pink;
		margin: 20rpx auto 0;
	}

	.active2 {
		color: #333333 !important;
	}

	.jy_time_box {
		width: 750rpx;
	}

	.jy_time {
		width: 375rpx;
	}

	.navbar_btn {
		width: 92%;
		height: 60rpx;
		margin: 0 auto;
	}

	.navbar_btn>text {
		width: 50%;
		font-size: 32rpx;
		color: #999999;
		text-align: center;
	}

	.tab-nav {
		width: 750rpx;
		height: 100rpx;
		background: #E0DDDA;
		// margin-left: 20rpx;
		display: flex;
		align-items: center;
		position: fixed;
		// top: 100rpx;
		z-index: 999;

		.tab-list-item {
			position: relative;
			// width: 180rpx;

			.text {
				display: flex;
				justify-content: center;
				align-items: center;
				margin-left: 50rpx;
				padding: 20rpx;
				height: 52rpx;
				opacity: 1;
				font-weight: 400;
				text-align: center;
				font-size: 32rpx;
				color: #A6A5AF;
			}

			.active {
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
			}
		}
	}

	.obj_list {
		margin-top: 30rpx;
		width: 750rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		.obj_list_item {
			width: 330rpx;
			// height: 544rpx;
			background: #B7A184;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			margin: 20rpx;
			position: relative;

			/deep/.uni-checkbox-input {
				width: 40rpx;
				height: 40rpx;
				position: absolute;
				bottom: 20rpx;
				right: 20rpx;
				border-radius: 50%;
				color: #ffffff !important;
			}

			.obj_list_item_bg {
				width: 330rpx;
				height: 312rpx;
				display: block;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
			}

			.obj_list_item_num {
				width: 312rpx;
				margin-top: 22rpx;
				margin-left: 18rpx;
				font-weight: 400;
				font-size: 26rpx;
				color: #fff;
				white-space: nowrap;
				/* 不换行 */
				overflow: hidden;
				/* 超出部分隐藏 */
				text-overflow: ellipsis;
			}

			.obj_list_item_name {
				width: 312rpx;
				margin-top: 30rpx;
				margin-left: 18rpx;
				font-size: 30rpx;
				color: #FFFFFF;
				white-space: nowrap;
				/* 不换行 */
				overflow: hidden;
				/* 超出部分隐藏 */
				text-overflow: ellipsis;
				/* 显示省略号 */
			}

			.obj_list_item_from {
				width: 312rpx;
				margin-top: 20rpx;
				margin-left: 18rpx;

				display: flex;
				align-items: center;
				/* 显示省略号 */

				>image {
					width: 36rpx;
					height: 36rpx;
					margin-right: 12rpx;
				}

				.obj_list_item_from_name {
					width: 264rpx;
					white-space: nowrap;
					/* 不换行 */
					overflow: hidden;
					/* 超出部分隐藏 */
					text-overflow: ellipsis;
					font-size: 24rpx;
					color: #FFFFFF;
				}

			}

			.obj_list_item_price {
				width: 312rpx;
				height: 50rpx;
				margin-left: 18rpx;
				margin-top: 22rpx;
				padding-bottom: 22rpx;
				display: flex;
				align-items: center;
				// border-bottom: 2rpx solid rgba(255, 255, 255, 0.1);

				.obj_list_item_price_tag {
					width: 100rpx;
					height: 36rpx;
					background: #A68A64;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					font-size: 24rpx;
					color: #FFFFFF;
					line-height: 36rpx;
					text-align: center;
					margin-right: 10rpx;
				}

				>text {
					// font-family: youshe;
					font-weight: 700;
					font-size: 36rpx;
					color: #FFFFFF;
				}
			}

			.btnwrap {
				display: flex;
				width: 330rpx;
				justify-content: flex-start;

				.btn {
					// margin-left: 172rpx;
					margin-top: 20rpx;
					margin-bottom: 20rpx;
					width: 136rpx;
					height: 52rpx;
					background: #F2EFEC;
					border-radius: 48rpx 48rpx 48rpx 48rpx;
					text-align: center;
					line-height: 52rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #A68A64;
				}

				.btn_none {
					// margin-left: 172rpx;
					margin-top: 20rpx;
					margin-bottom: 20rpx;
					width: 136rpx;
					height: 52rpx;
					// background: linear-gradient( 274deg, #0014FF 0%, #8020EF 50%, #FF2CDF 100%);
					border-radius: 48rpx 48rpx 48rpx 48rpx;
					text-align: center;
					line-height: 52rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #FFFFFF;
				}

				.btn2 {
					margin-left: 172rpx;
					margin-top: 20rpx;
					width: 136rpx;
					height: 52rpx;
					margin-bottom: 20rpx;
					background: #F2EFEC;
					border-radius: 48rpx 48rpx 48rpx 48rpx;
					text-align: center;
					line-height: 52rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #A68A64;
				}

				.btn3 {
					// margin-left: 172rpx;	
					margin-top: 20rpx;
					width: 136rpx;
					height: 52rpx;
					margin-bottom: 20rpx;
					background: #53418B;
					border-radius: 48rpx 48rpx 48rpx 48rpx;
					text-align: center;
					line-height: 52rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #FFFFFF;
				}
			}

			.tag {
				width: 100rpx;
				height: 44rpx;
				background: rgba(0, 0, 0, 0.8);
				border-radius: 25rpx;
				position: absolute;
				top: 14rpx;
				right: 14rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #FFFFFF;
				text-align: center;
				line-height: 44rpx;
			}
		}
	}

	.zz_wrap {
		width: 602rpx;
		height: 628rpx;
		background: #2A2753;
		border-radius: 22rpx 22rpx 22rpx 22rpx;

		.tit {
			width: 602rpx;
			text-align: center;
			font-weight: 500;
			font-size: 36rpx;
			color: #FFFFFF;
			padding-top: 50rpx;
		}

		.price {
			width: 602rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 50rpx;

			>image {
				width: 50rpx;
				height: 50rpx;
				margin-right: 20rpx;
			}

			font-weight: 500;
			font-size: 72rpx;
			color: #FFFFFF;

		}

		.text {
			width: 602rpx;
			text-align: center;
			font-weight: 300;
			font-size: 28rpx;
			color: #FFFFFF;
			margin-top: 20rpx;
		}

		.btn_wrap {
			width: 602rpx;
			height: 72rpx;
			display: flex;
			align-items: center;
			justify-content: space-around;
			margin-top: 60rpx;

			.btn_one {
				width: 220rpx;
				height: 72rpx;
				border-radius: 280rpx 280rpx 280rpx 280rpx;
				border: 2rpx solid rgba(255, 255, 255, 0.3);
				font-weight: 400;
				font-size: 28rpx;
				color: #A6A5AF;
				text-align: center;
				line-height: 72rpx;
			}

			.btn_two {
				width: 220rpx;
				height: 72rpx;
				background: linear-gradient(274deg, #0014FF 0%, #8020EF 50%, #FF2CDF 100%);
				border-radius: 280rpx 280rpx 280rpx 280rpx;
				text-align: center;
				line-height: 72rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #FFFFFF;
			}
		}

		.tip {
			margin: 0 auto;
			margin-top: 60rpx;
			width: 472rpx;

			.tip_tit {
				font-weight: 400;
				font-size: 28rpx;
				color: #FFFFFF;
			}

			.content {
				font-weight: 400;
				font-size: 26rpx;
				color: #A7A4AD;
			}
		}
	}

	.pass_wrap {
		width: 602rpx;
		height: 406rpx;
		background: #2A2753;
		border-radius: 22rpx 22rpx 22rpx 22rpx;
		z-index: 998;

		.tit {
			width: 602rpx;
			text-align: center;
			font-size: 36rpx;
			color: #FFFFFF;
			padding-top: 50rpx;
			margin-bottom: 70rpx;
		}

		.code_input {
			margin: 0 auto;
		}

		.other_btnwrap {
			width: 522rpx;
			height: 72rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 0 auto;
			margin-top: 50rpx;

			.other_btn1 {
				width: 220rpx;
				height: 72rpx;
				border-radius: 280rpx 280rpx 280rpx 280rpx;
				border: 2rpx solid rgba(255, 255, 255, 0.3);
				font-size: 28rpx;
				color: #A6A5AF;
				text-align: center;
				line-height: 72rpx;
			}

			.other_btn2 {
				width: 220rpx;
				height: 72rpx;
				background: linear-gradient(274deg, #0014FF 0%, #8020EF 50%, #FF2CDF 100%);
				border-radius: 280rpx 280rpx 280rpx 280rpx;
				font-size: 28rpx;
				color: #FFFFFF;
				text-align: center;
				line-height: 72rpx;
			}
		}

		.u-code-input {
			margin-left: 50rpx;
		}

		.uni-input-input {
			margin-left: 50rpx;

			font-size: 32rpx;
			opacity: 1 !important;
		}

		/deep/.u-code-input__item>text {
			color: #fff !important;
		}
	}


	.dig_box {
		width: 100%;
		/* height: 800rpx; */
		background: #E0DDDA;
		border-radius: 40rpx 40rpx 0 0;
		padding-top: 20rpx;
	}

	.dig_list {
		width: 100%;
		padding: 0 30rpx;
		margin-top: 48rpx;
	}

	.dig_list>text:nth-child(1) {
		color: #333;
		font-size: 30rpx;
	}

	.virtual_props {
		width: 100%;
		margin: 30rpx;
	}

	.virtual_box {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 168rpx;
		height: 168rpx;
		background: #F2EFEC;
		border-radius: 16rpx;
		margin-right: 20rpx;
	}

	.virtual_box>image {
		width: 68rpx;
		height: 72rpx;
		margin-bottom: 20rpx;
	}

	.navigation {
		position: relative;
		width: 692rpx;
		height: 86rpx;
		background: linear-gradient(90deg, #AB8E68 0%, #D7BA93 100%);
		border-radius: 40rpx;
		margin: 0 auto;
	}

	.navigation>text {
		font-size: 34rpx;
		font-family: iconfont;
		color: #ffffff;
		font-weight: 700;
	}

	.navigation>image {
		position: absolute;
		top: 0;
		left: 22%;
		width: 110rpx;
		height: 80rpx;
	}

	.prompt {
		width: 600rpx;
		min-height: 400rpx;
		background: #E0DDDA;
		margin: 0 auto;
		border-radius: 20rpx;
		color: #333;
		padding-top: 30rpx;
	}

	.prompt>text {
		margin-top: 40rpx;
	}

	.prompt_tit {
		margin: 0 30rpx;
		font-size: 28rpx;
		color: #333;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.prompt_ntm {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		width: 414rpx;
		height: 72rpx;
		line-height: 72rpx;
		background: linear-gradient(90deg, #AB8E68 0%, #D7BA93 100%);
		border-radius: 28rpx;
		margin-top: 80rpx;
		color: #ffffff;
	}

	.hoarding {
		font-size: 24rpx;
		color: #e6e6e6;
		padding: 0 20rpx 20rpx;
	}

	.reds {
		color: #fa3534 !important;
	}

	/deep/ .u-navbar__content__right__text {
		color: #666666;
	}
</style>